Suche
Letztes Update:
21. September 2023
Entwurf – Inhalt noch in Arbeit
Symbolbild
Wie hilft dieses Element den Nutzern?
Suchfunktionen helfen den Nutzern aus umfangreichen Inhalten rasch und zielgerichtet die für sie relevanten Inhalte einzugrenzen und gewünschte Inhalte zu finden. Eine Suche zählt – als Alternative zu vorgegebenen Menüstrukturen – zu den wesentliche Möglichkeiten der Navigation auf digitalen Plattformen.
Ist die Suchfunktion selbst nicht nutzerfreundlich umgesetzt, kann dies trotz der Möglichkeit einer Suche zu negativen Erlebnissen führen.
Wann kommt dieses Element zum Einsatz?
Die Suchefunktion findet sich auf allen Seiten immer an der selben Stelle ganz oben mittig oder rechts – als Teil des Headers.
UX Konzeption
Suche
Suchfeld und Interaktions-Icon
Anstatt einem „Suchen“ Button wird – statt dem Wort „Suchen“ – ein Lupen-Icon in ein Suchfeld integriert. Den Hintergrund bildet eine Farbe mit hohem Kontrast zum Icon. Das Lupen-Icon kann – speziell für mobile Ansichten – auch alleine stehen. Das Suchfeld wird ausgeblendet, das Lupen-Icon kommt als Erkennung und Interaktionsbutton zum Einsatz. Bei Klick oder Touch öffnet das Suchfeld nach links oder unten. Sobald der Platz es erlaubt muss – wenn auch zunächst kleines – Suchfeld angezeigt werden. Dieses vergrößert sich bei Interaktion. Bei Aktivsetzung bzw. Interaktion soll das Suchfeld so groß wie möglich werden. Dies animiert die Nutzer zu längeren und genaueren Suchanfragen und verbessert somit auch das Suchergebnis.
Bezüglich der Größe des Interaktions-elementes siehe „Icons“
Das Icon stellt das Interaktionselement dar und startet bei Klick/Touch die Suche. Darüberhinaus muss die Suche auch per Tastatur (Eingabetaste) startbar sein.
Jede Suchmöglichkeit wird mit der ARIA-Rolle aria-role=“search“ gekennzeichnet, welche dem Tag zugeordnet wird.
Placeholder des Sucheingabefeldes
Als Vorbelegung des Suchfeldes (Placeholder) werden Arten des möglichen Suchbegriffes angegeben. Zum Beispiel: „Reisecode, Stadt, Land, Region, Ort oder Hotel …“
Suchumfang bzw. kontextuelle Suche
Suchfunktion muss alle Inhalte der Plattform bzw. einer Domain durchsuchen – es muss der vollständige Inhalt der gesamten Plattform indiziert sein.
Zusätzlich können kontextuelle Bereichs-Suchen eingesetzt werden. Dabei muss es für den Nutzer klar und deutlich ersichtlich sein, das es sich um eine Suche handelt, die nur einen gewissen Inhalt durchsucht.
Alternativ – kann dem Nutzer auch wählbar gemacht werden welchen Bereich/Kontext er durchsuchen will. Das gibt dem Nutzer die Möglichkeit bereits bei der Sucheingabe zusätzlich zu filtern. Dadurch werden bereits vorab Suchumfang und Suchergebnisse fokussiert und reduziert werden.
Dies erfolgt mittels einem farblich abgegrenzten Dropdown-Menüs, mittels dem der Nutzer vor der Bestätigung der Suche eingrenzende Teilbereiche/Unterrubriken wählen kann, welche durchsucht werden sollen. Diese Kontext-Suche darf ausschließlich zusätzlich zu einer Gesamt-Suche eingesetzt werden.
Möglichkeiten bei Aktivsetzung des Suchfeldes
Setzt der Nutzer das Suchfeld aktiv, erscheinen – vor der beginnenden Eingabe, welche mittels Autosuggest/Autocomplete unterstützt wird – bereits erste Möglichkeiten für die Suche.
Beispielsweise kann hier eine hierarchische Datenauswahl nach Ländern/Regionen erfolgen.
Genaueres muss individuell je Projekt evaluiert werden.
Autosuggest/Autocomplete
Eine Vorschlagsfunktion listet – bereits während der Eingabe – automatisch mögliche Suchworte/-phrasen.
Dies erfolgt in einem Dropdown unterhalb des Suchfeldes. Die Überschrift der Suchvorschläge lautet „Suchbegriffe:“ und ist fett hervorgehoben. Der Teil des Vorschlages, welchen der Nutzer eingegeben hat, wird ebenfalls Fett markiert.
Suchbegriff falsch aber erkennbar
Wird ein Suchbegriff falsch geschrieben sodass die Autosuggest/Autocomplete Funktion keine Treffer mehr liefert, es aber erkennbar ist welcher Begriff gemeint war (z.B. aufgrund von Tippfehlern) wird die Suche mit dem wahrscheinlichen Suchbegriff gestartet. Dabei muss jedoch bei der Anzeige der Anzahl gefundener und angezeigter Ergebnisse genau ausgewiesen werden für welches (abweichende) Wort die Ergebnisse angezeigt werden und der ursprünglich getippte Begriff als Alternativsuche angeboten werden. Z.B.: „1 – 23 von 768 Ergebnissen für ‚Zypern‘. Alternativ nach ‚Züpern‘ suchen.“
Suchbegriff falsch und nicht erkennbar: „Did you mean“
Für den Fall dass Suchbegriffe falsch geschrieben werden und die Autosuggest/Autocomplete Funktion keine Treffer mehr liefert sollen mögliche/wahrscheinliche Suchbegriffe unter der Headline „Meinten Sie“ zur Auswahl angeboten werden. Bei Klick/Touch startet die Suche direkt mit dem ausgewählten Begriff.
Achtung: Nur Begriffe anbieten die auch Ergebnisse liefern!
Automatische Empfehlungen
In gleicher Art und Weise wie Autosuggest/Autocomplete werden dem Nutzer während der Eingabe auch Produktempfehlungen angezeigt. Dies erfolgt – bei größeren Breakpoints – rechts von den Suchbegriffen im Dropdown. Die Überschrift lautet „Empfehlungen:“ und ist fett hervorgehoben. Die Anzahl der Produktempfehlungen beträgt idealerweise fünf, alternativ drei.
Fehlertolerante Suche durch Stammwort-Reduktion
Bei der Umsetzung der Suche auf Stammwort-Reduktion achten. Dadurch wird gewährleistet dass relevante Suchergebnisse gefunden werden, egal ob der Nutzer in Groß- oder Kleinschreibung, Singular oder Plural oder einer Konjunktion sucht. Die Suche deckt dabei nicht nur das eingegebene Wort ab sondern sucht – unabhängig von Singular/Plural oder Konjunktion – nach dem jeweiligen Wort in Singular und zusätzlich dem Wortstamm.
Und-/Oder-Verknüpung
Werden mehrere Begriffe eingegeben, wird „und“ als Standard-Verknüpfung verwendet.
Ergebnis
Ergebnisse: Anzahl gefundener und angezeigter
Oberhalb der Trefferliste erfolgt die Angabe über die gesamte Anzahl der gefundenen Ergebnisse zu durchgeführter Suche und auch die Anzeige der auf der aktuellen Seite dargestellten Ergebnisse. Auch wenn es keine Suchergebnisse gibt wird dies dem Nutzer mitgeteilt. Auch der Suchbegriff wird nochmals dargestellt.
z.B.: „1 – 23 von 768 Ergebnissen für ‚Suchbegriff'“
Die Anzeige der Anzahl gefundener Treffer erhält das Attribut aria-alert: role=“alert“.
Keine Ergebnisse – Umgang mit Null Suchergebnissen
Ähnlich wie die Anzahl gefundener und angezeigter Ergebnisse muss auch bei keinen gefundenen Ergebnissen im oberen Inhaltsbereich klar und deutlich erkennbar sein, dass keine Suchergebnisse gefunden wurden.
Nutzeroptimierte Beschreibung der nicht vorhandenen Ergebnisse – Siehe UX-Writing
Möglichkeiten bieten um die Suche anzupassen. Dazu wird das Suchfeld mit dem ursprünglichen Suchbegriff vorbefüllt angezeigt.
Ähnliche Suchbegriffe zur Auswahl anbieten, welche Treffer aufweisen. Nur anbieten wenn auch Treffer gefunden werden!
Möglichkeiten bieten um mittels anderer Navigationsformen (z.B. Teaser) zu gewünschten/interessanten Inhalten zu gelangen.
Direkte Einstiegspunkte ins Portal anbieten. Z.B. in Form von Teasern zu bestimmten Themenbereichen. Idealerweise sind die angebotenen Themen bzw. Kategorien ähnlich dem gewählten Suchbegriff.
Elemente der Ergebnisdarstellung
Suchtreffer werden jedenfalls mit einem eindeutigen Titel, einer prägnanten Beschreibung und einem Bild dargestellt. Darüber hinaus unterscheiden sich Produkte von Seiten als Ergebnisdarstellung.
Das gesuchte Wort wird in der Ausgabe der Ergebnisse immer fett markiert.
Die Suchergebnisse werden nicht in einem div sondern in einer mit labelledby=“ID“ (ID der Headline 1 – !Ihr Suchergebnis) dargestellt. Alternativ kann der div mit role=“Region“ und aria-label bzw. aria-labelledby gekennzeichnet werden.
Produkte als Ergebnisdarstellung
folgt…
Seiten als Ergebnisdarstellung
folgt…
Ergebnisse: Sortieren
Initiale Sortierung ist immer absteigende Relevanz bzw. Übereinstimmung mit der Suchphrase.
Darüber hinaus hat der Nutzer die Möglichkeit die Ergebnisse nach seinen Bedürfnissen zu sortieren. Details hierzu siehe „Sortieren“
Ergebnisse: Filtern (Facettensuche)
Filterfunktionen ermöglichen dem Nutzer die Suchergebnisse weiter einzugrenzen. Über die Filterfunktionen erkennt der Nutzer auch den Umfang und die Attribute der vorhandenen Inhalte.
Details hierzu siehe „Filtern“
Paginierung – Endless Scrolling
Bei größeren Mengen an Teasern bzw. Suchergebnissen kommt eine Pagination bzw. Endless Scrolling zum Einsatz.
Strukturierte Daten / Schema.org
Auf den Plattformen und in E-Mail Nachrichten wie beispielsweise Newslettern kommen Schemata für strukturierte Daten zum Einsatz. Diese ermöglichen unter anderem Anwendungen von Google, Microsoft, Pinterest etc. mittels dieser Informationen reichhaltigere und für die Nutzer passende Inhalte anzuzeigen.
Einführung in das Markup für strukturierte Daten in der Google Suche
Details zu den für Plattformen und E-Mail Nachrichten zu verwendende Schemata:
- Meta Tags und Strukturierte Daten
- https://schema.org/
- Einführung in das Markup für strukturierte Daten in der Google Suche auf developers.google.com
- Search Result Page: schema.org/SearchResultsPage
- Search Action: schema.org/SearchAction
- Produkte: https://schema.org/Product
- Events: https://schema.org/Event
- Places: https://schema.org/Place
- Person: https://schema.org/Person
- List Order: https://schema.org/ItemListOrderTyp
- Place / Standort: https://schema.org/Place
- Availability: https://schema.org/ItemAvailability
Weiterführendes zu Zugänglichkeit und Barrierefreiheit
Richtlinie für barrierefreie Webinhalte (WCAG)
Die Richtlinien für barrierefreie Webinhalte (WCAG) beinhaltet Prinzipien, Richtlinien und Erfolgskriterien um Webinhalte barrierefreier zu gestalten. Die Grundlagen zur Zugänglichkeit sind in der Guideline eingearbeitet. Details finden sich unter Richtlinien für barrierefreie Webinhalte WCAG.
Accessible Rich Internet Application (ARIA)
ARIA-Spezifikationen sind eine definierte Semantik für Barrierefreiheit und wird verwendet, um barrierefreie Webumgebungen zu erstellen. Anleitungen, Muster und funktionale Beispiele finden sich unter https://www.w3.org/WAI/ARIA/apg/.
Detailliertere Informationen für vorliegendes Element:
- www.w3.org/WAI/ARIA/apg/patterns/combobox/
- www.w3.org/WAI/ARIA/apg/patterns/listbox/
- www.w3.org/WAI/ARIA/apg/patterns/menubar/
- https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
UX-Writing
Was ist zu texten
- Formularfeld Beschriftungen – Siehe Formulare: Eingabe von Daten
- Icon Beschriftungen – Siehe Icons
- „Leere“ beschreiben wenn keine Suchergebnisse gefunden werden können
Wie ist zu texten
Es gelten die allgemeinen Regeln zu Text formulieren – interessant, verständlich und vertrauenswürdig schreiben und folgende spezifische Vorgaben:
- Formularfeld Beschriftungen – Siehe Formulare: Eingabe von Daten
- Icon Beschriftungen – Siehe Icons
- „Leere“ beschreiben wenn keine Suchergebnisse gefunden werden können